<template>
    <view>
		
		<view class="uni-bg-white" style="position:fixed;width:100%;z-index:999;">
			<!-- 使用scroll-view实现tabs滑动切换 -->
			<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
				<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)" @click="swichMenu(item.id - 1)">
					<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
						<text class="menu-topic-text">{{item.name}}</text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="padding:40rpx 0;"></view>
		<view id="orderList">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback"
						 :up="upOption" 
						 :top="0" 
						 :bottom="0" 
						 :topbar="false" 
						 :bottombar="true" 
						 :fixed="true" 
						 height="100%" 
						 :safearea="false" 
						 :sticky="true">
			<view>
				<uni-card :is-shadow="false" v-for="(it, index) in orderList">
					<view class="uni-flex uni-row" 
						style="padding:10rpx 0;border-bottom:1rpx solid #DDDDDD;justify-content:space-between;color:#181818;font-size:12pt;">
						<view class="uni-flex uni-row"
							style="justify-content:flex-start;align-items:center;">
							<view>
								<image style="width:80rpx;height:80rpx;border-radius:10rpx;"
									:src="it.orderUserAvatar == null || it.orderUserAvatar == '' ? USER_AVATAR_DEFAULT : it.orderUserAvatar"></image>
							</view>
							<view style="padding-left: 20rpx;">
								<text>{{it.orderUserName}}</text>
							</view>
						</view>
						<!-- <view style="color:#FF4D4F;font-size:12pt;" v-show="currentTab != 0">
							<text>{{it.statusName}}</text>
						</view> -->
					</view>
					<view class="uni-flex uni-row" style="padding:30rpx 0;border-bottom:1rpx solid #DDDDDD;color:#181818;font-size:12pt;">
						<view class="uni-flex uni-column" style="flex-grow:2;">
							<view class="uni-flex uni-row" style="">
								<view style="font-size:11pt;color:#7B7B7B;">
									<text>下单时间: </text>
								</view>
								<view style="padding-left:20rpx;" >
									<view>
										<text>{{it.orderTime}}</text>
									</view>
								</view>
							</view>
							<view class="uni-flex uni-row" style="padding-top:30rpx">
								<view style="font-size:11pt;color:#7B7B7B;">
									<text>取件地址: </text>
								</view>
								<view style="padding-left:20rpx;" >
									<view>
										<text>{{it.fromShopName}} {{it.fromAddress}}</text>
									</view>
								</view>
							</view>
							<view class="uni-flex uni-row" style="padding-top:30rpx">
								<view style="font-size:11pt;color:#7B7B7B;">
									<text>收件地址: </text>
								</view>
								<view style="padding-left:20rpx;">
									<view>
										<text>{{it.toShopName}} {{it.toAddress}}</text>
									</view>
								</view>
							</view>
							<view class="uni-flex uni-row" style="padding-top:30rpx" v-show="it.haulageWay == 1">
								<view style="font-size:11pt;color:#7B7B7B;">
									<text>货物信息: </text>
								</view>
								<view style="padding-left:20rpx;">
									<text style="padding-right:30rpx;" v-for="cargo in it.cargoList">
										{{cargo.name}}*{{cargo.count}}
									</text>
								</view>
							</view>
							<view class="uni-flex uni-row" style="padding-top:30rpx;" v-show="it.haulageWay == 2">
								<view  style="color:#7B7B7B;">
									<text>包车</text>
								</view>
							</view>
							<view class="uni-flex uni-row" style="padding-top:30rpx;"
								  v-if="it.deliveryStatus != 10 && it.deliveryStatus != 20">
								<view style="font-size:11pt;color:#7B7B7B;">
									<text>取件时间: </text>
								</view>
								<view style="padding-left:20rpx;" >
									<view>
										<text>{{it.takingTime}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- <view style="display:flex;align-items:center;color:#181818;font-size:12pt;">
							<text style="font-size:9pt;">￥</text><text>{{it.payFee}}</text>
						</view> -->
					</view>
					<view style="padding-top:30rpx;width:100%;">
						<button type="primary" style="font-size:12pt;background-color:#0958d9;"
							@click="onClickReceive(it.deliveryId)"
							v-if="it.deliveryStatus == 10"
							>接 单</button>
						<button type="primary" style="font-size:12pt;background-color:#0958d9;"
							@click="onClickTake(it.deliveryId)"
							v-if="it.deliveryStatus == 20"
							>确认取件</button>
					</view>
				</uni-card>
			</view>
			</mescroll-body>
		</view>
		
    </view>
</template>
<script>
	import { USER_AVATAR_DEFAULT, APP_ID} from '@/util/constant.js';
	import { $get, post, getUserId } from '@/util/request.js';
	
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				mescroll:null,
				mescrollTop:'44px',
				upOption: {
					use: true,
					auto: false,
					noMoreSize: 3,
					warpId:'orderList',
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- 没有更多数据 --', // 没有更多数据的提示文本
					empty: {
						use: true, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~' // 提示
					},
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 4, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
				},
				tabs: [
					{
						id:1,
						name: '待接单'
					}
					,{
						id:2,
						name: '待取件'
					}
					,{
						id:3,
						name: '已完成'
					}
				],
				currentTab: 0,
				tabCurrent: '',
				
				orderList: []
			}
		},
		onLoad() {
			var that = this;
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
				$get('ac/app/version?appId=' + APP_ID).then(res => {
					if (wgtinfo.version != res.version) {
						uni.showModal({
							title: '发现新版本，是否更新',
							success(res) {
								
							}
						})
					}
				});
			});
		},
		onShow() {
		},
		methods: {
			downWgt(param) {
				let that = this;
				
				uni.showLoading({
					title: '更新中……'
				});
				
				const downloadTask = uni.downloadFile({
					url: param.url
				});
			},
			
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(res) {
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				this.queryOrderList(page.num, page.size);
			},
			onClickReceive(deliveryId) {
				var param = {
					userId: getUserId(),
					deliveryId: deliveryId
				};
				post('delivery/task/receive', param).then(res => {
					if (res.data) {
						uni.showToast({
							icon: 'success',
							title: '接单成功'
						});
						this.mescroll.resetUpScroll();
					}
				});
			},
			onClickTake(deliveryId) {
				var param = {
					userId: getUserId(),
					deliveryId: deliveryId
				};
				post('delivery/task/take', param).then(res => {
					if (res.data) {
						uni.showToast({
							icon: 'success',
							title: '取件成功'
						});
						this.mescroll.resetUpScroll();
					}
				});
			},
			swichMenu(index) {
				this.currentTab = index
				this.tabCurrent = 'tabNum'+ index
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			queryOrderList(pageIndex, pageSize) {
				let index = this.currentTab, 
					param = {
						pageIndex: pageIndex - 1,
						pageSize: pageSize
					};
				if (index == 0) {
					param.queryType = 1;
					param.deliveryStatusList = [10];
				} else if (index == 1) {
					param.queryType = 2;
					param.deliveryStatusList = [20];
				} else if (index == 2) {
					param.queryType = 3;
				}
				this.loadOrderList(param);
			},
	        loadOrderList(param) {
				var that = this;
				var userId = getUserId();
				if (userId != null && userId != '') {
					param.userId = userId;
					post('delivery/task/list', param).then(res => {
						let hasNext = res.data != null && res.data.length >= param.pageSize ? true : false;
						if (param.pageIndex == 0) {
							that.orderList = res.data;
						} else {
							if (res.data != null && res.data.length > 0) {
								that.orderList = that.orderList.concat(res.data);
							}
						}
						that.mescroll.endSuccess(that.orderList == null ? 0 : that.orderList.length, hasNext);
					});
				}
			}
		}
	}
</script>

<style scoped  lang="scss">
page {
	color:#181818;
}
.top-menu-view {
	display: flex;
	white-space: nowrap;
	width: 100%;
	background-color: #FFFFFF;
	height: 86rpx;
	line-height: 86rpx;
	border-top: 1rpx solid #d8dbe6;
	
.menu-topic-view {
				display: inline-block;
				white-space: nowrap;
				height: 86rpx;
				position: relative;
	
	
				.menu-topic-text {
					font-size:12pt;
					color: #303133;
					padding: 20rpx 70rpx;
				}
	
				.menu-topic-bottom {
					position: absolute;
					bottom: 0;
					width: 100%;
	
					.menu-topic-bottom-color {
						width: 40rpx;
						height: 4rpx;
					}
				}
	
				.menu-topic-act .menu-topic-bottom {
					display: flex;
					justify-content: center;
				}
	
				.menu-topic-act .menu-topic-bottom-color {
					background: #0958d9;
				}
				.menu-topic-act .menu-topic-text {
					font-size:12pt;
					color: #0958d9;
					padding: 20rpx 70rpx;
				}
	
	
	
			}
	
}
</style>
